<template>
  <view class="main-box">
    <view class="containerBody">
      <view class="my-date">
        <view class="my-date-input" @click="change" style="padding-left:25rpx">
          <view style="margin-right: 20rpx">{{ valueTime }}</view>
          <u-image
            width="40rpx"
            height="40rpx"
            src="../../../static/images/dateTime.png"
          ></u-image>
        </view>
       <!--  <view class="my-date-select">
          <picker
            @change="bindPickerChange"
            :value="index"
            :range="userList"
            :range-key="'userName'"
          >
            <view class="userSelectEnd">
              <view  style="margin-right: 20rpx">
                {{ userList[index] ? userList[index].userName : '' }}
              </view>
              <u-image
               
                width="40rpx"
                height="40rpx"
                src="../../../static/images/down.png"
              ></u-image
            ></view>
          </picker>
        </view> -->
      </view>
      <view class="u-page__item">
        <u-image
          v-if="viewList.length === 0"
          style="margin-top: 120rpx;"
          width="100%"
          height="520rpx"
          src="../../../static/images/nodata.png"
        ></u-image>
        <view class="box" v-else>
          <view style="border-bottom: 1rpx solid #d6dfec;padding: 10rpx 20rpx 20rpx 20rpx;"
            v-for="(viewItem, index) in viewList"        
            :key="viewItem.id">
           <view class="my-title-box">
              <view class="my-title-item-box">
                <view style="display: flex; align-items: center">
                  <u-image
                    width="20rpx"
                    height="20rpx"
                    :src="
                      viewItem.checked
                        ? '../../../static/images/yuan_a.png'
                        : '../../../static/images/yuan_aa.png'
                    "
                  ></u-image>
                  <text class="title" style="margin-left: 20rpx">
                    {{  viewItem.leaderName }}   <!-- changeTimeDate(viewItem.createTime) -->
                  </text>
                </view>
           <!--      <view class="sub-title">
              
                  <text style="font-size: 20rpx; color: #606c81">{{
                    viewItem.positionName
                  }}</text>
                </view> -->
              </view>
              <view
                class="callape-btn"
                @click="isShowClick(index, viewItem.checked)"
                >{{ viewItem.checked ? '收回' : '展开' }}
              </view >
           </view>
           <view class="sub-title">
                <text
                  style="font-size: 26rpx; color: #606c81; "
                >
                 {{ viewItem.positionName }}
                </text>
                <text style="font-size: 26rpx; color: #606c81">
                 {{ viewItem.createTime }} 
                </text>
           </view>

            <view
              class="details" 
              :class="viewItem.checked && 'u-page__item_daily'"
              v-show="viewItem.checked">
              <view class="waterMark">{{userName}}&ensp;{{lookDate}}</view>
              <view
                v-for="(infoItem, index) of viewItem.Content"
                :key="`${infoItem.key}`"
              >
                <view class="form-view-title" v-if="infoItem.info"
                  >{{ index + 1 }}.{{ infoItem.info }}</view
                >
                <view class="imgDetails">
                  <view
                    style="
                     width:540rpx;
				             margin: 0 10rpx 20rpx 10rpx;
                    "
                    v-for="srcItem of infoItem.imgUrl"
                    :key="srcItem.key"
                  >
                    <image
                      v-if="fileFormatHandle(srcItem.url) != 'mp4'"
                      style="
                         width: 100%; 
                        border: 1px solid #eee;
                      " mode= "widthFix"
                      @click="previewImg(JSON.stringify(srcItem.url))"
                      :lazy-load="true"
                      :webp="true"
                      :src="srcItem.url ? srcItem.url : ''"
                    ></image>
                    <video
                      style="
                        width: 100%; 
				                height: 400rpx;
                        border: 1px solid #eee;
                      "
                      v-if="fileFormatHandle(srcItem.url) == 'mp4'"
                      direction="0"
                      :src="srcItem.url"
                    ></video>
                  </view>
                </view>
              </view>
              <view class="waterMark">{{userName}}&ensp;{{lookDate}}</view>
            </view>
          </view>
        </view>
      </view>
      <u-datetime-picker
        :show="timeShow"
        @cancel="timeCancel"
        @confirm="timeConfirm"
        v-model="value"
        mode="date"
      ></u-datetime-picker>
    </view>
    <view style="position: fixed; bottom: 0px; z-index: 3; width: 100%">
      <cmp-tab-bar :tabBarList="tabBarList"></cmp-tab-bar>
    </view>
  </view>
</template>
<script>
import uImage from '../../../uview-ui/components/u--image/u--image.vue'
import cmpTabBar from '../../../components/cmp-tab-bar.vue'
import { convertToChinaNum } from '@/utils/convertToChinaNum.js'
import { mapState } from 'vuex'
import moment from 'moment'
import { getSelectDailyByUserId, selectLeadersFun } from '@/service/services.js'
export default {
  components: { uImage, cmpTabBar },
  data() {
    return {
      index: 0,
      valueTime:"请选择时间",// moment(new Date()).format('YYYY-MM-DD'),
      timeShow: false,
      selectShow: false,
      userName:'',
			lookDate:moment(new Date()).format('YYYY-MM-DD'),
      selectValue: '请选择',
      value: moment(new Date()).format('YYYY-MM-DD'),
      viewList: [],
    }
  },
  onLoad() {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
  },
  mounted() {    
    this.userName=this.$store.state.userInfo.userName 
    selectLeadersFun({
      userId: this.userInfo.userId,
    }).then((res) => {
      const arr = res.data
      this.getList({
        createBy:this.userInfo.userId,
        status: 0,
        clerkid: this.userInfo.userId,
      })
    })
    uni.hideTabBar({
      animation: false,
    })
  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
    tabBarList(item) {
      return item.tabBarList
    },
  }),
  watch: {
    $route: {
      handler(newRouter) {},
      immediate: true,
    },
  },
  methods: {
    fileFormatHandle(fileName) {
      return fileName.substring(fileName.lastIndexOf('.') + 1)
    },
    //预览图片，放大预览
    previewImg(currentUrl) {
      let imgsArray = []
      imgsArray[0] = JSON.parse(currentUrl)
      uni.previewImage({
        current: 0,
        urls: imgsArray
      })  
    },

    bindPickerChange(e) {
      this.index = e.target.value
      this.getList({
        createBy:this.userInfo.userId,
       // leaderid: this.selectUserObj.userId,
        clerkid: this.userInfo.userId,
        createDate: this.valueTime,
        status: 0,
      })
    },
    changeNum(num) {
      return convertToChinaNum(num)
    },
    changeTimeDate(timeData) {
      return moment(timeData).format('YYYY-MM-DD')
    },

    timeCancel() {
      this.timeShow = false
    },
    timeConfirm(e) {
      this.valueTime = this.changeTimeDate(e.value)
      this.getList({
        createBy:this.userInfo.userId,
        clerkid: this.userInfo.userId,
       // leaderid: this.selectUserObj.userId,
        status: 0,
        createDate: this.valueTime,
      })
      this.timeShow = false
    },
    change() {
      this.timeShow = true
    },
    getList(parmas) {
      this.viewList = [] 
      getSelectDailyByUserId({
        createBy: parmas.clerkid,
        clerkid: parmas.clerkid,
        leaderid: parmas.leaderid,
        status: 0,
        createDate: parmas.createDate,
      }).then((res) => {
                        
        if (res.code === 200 && res.data.length > 0)
          res.data.forEach((item, index) => {
            this.viewList.push({
              id: item.id,
              leaderName: item.leaderName,
              createTime: item.createTime,
              positionName: item.positionName,
              checked: false,
              Content: [
                {
                  key: Math.random() + item.content1,
                  info: item.content1 || "",
                  describe1: item.describe1,
                  imgUrl: [],
                },
                {
                  key: Math.random() + item.content2,
                  info: item.content2 || "",
                  describe2: item.describe2,
                  imgUrl: [],
                },
                {
                  key: Math.random() + item.content3,
                  info: item.content3 || "",
                  describe3: item.describe3,
                  imgUrl: [],
                },
              ],
            })
            if (item.file1) {
              if (item.file1.indexOf(';', index + 1) === 1) {
                this.viewList[index].Content[0].imgUrl = [
                  {
                    key: Math.random() + item.file1,
                    url: item.file1,
                  },
                ]
              } else {
                const strArr = item.file1
                  .substring(0, item.file1.lastIndexOf(';'))
                  .split(';')
                const imgList = []
                strArr.forEach((info, index) => {
                  imgList.push({
                    key: Math.random() + info,
                    key: index + 'v',
                    url: info,
                  })
                })
                this.viewList[index].Content[0].imgUrl = imgList
              }
            }
            if (item.file2) {
              if (item.file2.indexOf(';', index + 1) === 1) {
                this.viewList[index].Content[1].imgUrl = [
                  {
                    key: Math.random() + item.file2,
                    url: item.file2,
                  },
                ]
              } else {
                const strArr = item.file2
                  .substring(0, item.file2.lastIndexOf(';'))
                  .split(';')
                const imgList = []
                strArr.forEach((info, index) => {
                  imgList.push({
                    key: Math.random() + info,
                    url: info,
                  })
                })
                this.viewList[index].Content[1].imgUrl = imgList
              }
            }
            if (item.file3) {
              if (item.file3.indexOf(';', index + 1) === 1) {
                this.viewList[index].Content[2].imgUrl = [
                  {
                    key: Math.random() + item.file3 + index,
                    url: item.file3,
                  },
                ]
              } else {
                const strArr = item.file3
                  .substring(0, item.file3.lastIndexOf(';'))
                  .split(';')
                const imgList = []
                strArr.forEach((info, index) => {
                  imgList.push({
                    key: Math.random() + info + index,
                    url: info,
                  })
                })
                this.viewList[index].Content[2].imgUrl = imgList
              }
            }
          })
        
      })

    },
    handleSelect() {
      this.selectShow = true
    },
    // 点击是否显示全文
    isShowClick(index, checked) {
      this.viewList[index].checked === true ?  this.viewList[index].checked = false : this.viewList[index].checked = true;
    },
  },
}
</script>

<style lang="scss" scoped>

.u-page__item {
  padding: 0 30rpx !important;
  box-sizing: border-box;
}
.u-page__item__title__slot-title {
  height: 80rpx;
  line-height: 80rpx;
}
.u-page__item_daily {
  background: #f8f8f8;
  border: 1rpx solid #d1d7df;
  box-shadow: 0px 2rpx 8rpx 0px #d0d6df;
  border-radius: 1rpx;
  padding: 30rpx;
  min-height: 400rpx;
}
.view_img {
  display: flex;
  flex-wrap: wrap;
  // justify-content: center;
  .view_img_item {
    margin: 10rpx 4px 0rpx 4rpx;
  }
}
.message_icon {
  width: 20rpx;
  height: 20rpx;
  background: #2b4fa3;
  border-radius: 50%;
  display: inline-block;
  margin-right: 22rpx;
}
.u-page {
  padding: 0;

  &__item {
    padding: 0 30rpx;
    min-height: 520px;
    &__title {
      background-color: $u-bg-color;
      padding: 15px;
      font-size: 15px;
      &__slot-title {
        font-size: 14px;
      }
    }
  }
}
.imgDetails {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30rpx;
}
.u-collapse-content {
  color: $u-tips-color;
  font-size: 14px;
}
.my-date {
  display: flex;
  align-items: center;
  position: relative;
  height: 90rpx;
  background: #05163E;
  box-shadow: 0px 3rpx 2rpx 0px hsl(219, 100%, 89%);
  border-radius: 10rpx 10rpx 0px 0px;
  justify-content: space-between;
  .my-date-select {
    text-align: end;
    margin-right: 30rpx;
    color: #fff;
    // color: #c7dbff !important;
  }
}
.title {
  font-size: 30rpx;
  color: #606c81;
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: #f5f9ff;
  
  .my-title-box {
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .my-title-item-box {
    font-weight: bold;
    color: #606c81;
    align-items: center;
  }
   .sub-title {
      padding-left: 40rpx;
      margin-top: -10rpx;
      display: flex;
      justify-content: space-between;
    }
  .userSelectEnd {
    display: flex;
  }
  .textDetails {
    margin: 20rpx 0rpx 32rpx 0rpx;
    height: 24rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #606c81;
    line-height: 30rpx;
  }
}
.containerBody {
  position: relative;
  flex: 1;
  margin: 0rpx 32rpx 160rpx 32rpx;
  box-sizing: border-box;
  border: 1rpx solid #ddd;
  z-index: 2;
  border-radius: 20rpx;
  background: #fff;
  padding-bottom: 90rpx;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  bottom: -6rpx;
  width: 100%;
}
.font{
	font-weight: bold;
}
.waterMark{
		color: #E0E0E0;
		transform: rotate(-45deg);
		opacity: 0.5;
		width: 300rpx;
      margin-left: 113rpx;
	}
</style>
